<template>
    <div>
        <el-form :model='typeForm' :rules='rules' ref='typeForm' label-width='100px' class='demo-ruleForm'>
            <el-row>
                <el-col :span=20>
                    <div class='unit_card' style="padding:50px 0 0 40px">
                        <span style='font-size:24px;color:#3366ff' >添加货物类型</span>
                    </div>
                </el-col>
                <el-col :span=4>
                    <div class='unit_card' style="padding:40px 0 0 40px">
                        <el-button @click='submit'>
                            确认添加
                        </el-button>
                    </div>
                </el-col>
            </el-row>
            <br  />
            <el-row>
                <el-col :span="11">
                    <div class="grid-content bg-purple-dark">
                        <div class='unit_card'>
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>货物类型信息</span>
                                </div>
                                    <el-form-item label='名称' prop="type">
                                        <el-input v-model="typeForm.type"></el-input>
                                    </el-form-item>
                                    <el-form-item label='延迟开始' prop='delay'>
                                        <el-input-number v-model="typeForm.delay" controls-position="right" :step="5" :min="0" :max="1275"></el-input-number>
                                        <span style='font-size:8;color:#888'>最小单位：5分钟，范围 0~1275分钟</span>
                                    </el-form-item>
                                    <el-form-item label='描述' prop="desc">
                                        <el-input type='textarea' :rows="2" placeholder="请输入描述（可选）" v-model="typeForm.desc"></el-input>
                                    </el-form-item>
                                    <el-form-item label='记录间隔' prop='period'>
                                        <el-input-number v-model="typeForm.period" controls-position="right" :precision="1" :step="0.5" :min="0.5" :max="127.5"></el-input-number>
                                        <span style='font-size:8;color:#888'>最小单位：0.5分钟，范围 0.5~127.5分钟</span>
                                    </el-form-item>
                            </el-card>
                        </div>
                        <div class='unit_card'>
                            <el-card class="box-card" shadow="hover">
                                <div class="text item">
                                    <el-form-item label='理想温度范围'>
                                        <el-input-number v-model='typeForm.low_temp' controls-position="right" :precision='1' :step="0.1" :min='-270' :max='typeForm.high_temp - 0.1'></el-input-number>
                                        &nbsp; ~ &nbsp;
                                        <el-input-number v-model='typeForm.high_temp' controls-position="right" :precision='1' :step="0.1" :min='typeForm.low_temp + 0.1' :max='100'></el-input-number>
                                    </el-form-item>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-col>
                <el-col :span="13">
                    <div class="grid-content bg-purple-dark">
                        <div class='unit_card'>
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>报警温区</span>
                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                </div>
                                <div class='analysis_area'>
                                    报警温区
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-checkbox-group v-model="checkedAlert">
                <el-col v-for="alert in alert_list" :key=alert.id :span="8">
                    <div class="grid-content bg-purple-dark">
                        <div class='unit_card'>
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    
                                    <el-checkbox 
                                        style="float: left; padding: 3px 0"
                                        :label=alert.id
                                        :key=alert.id
                                    >
                                        {{ '报警设置-主警报' + alert.id }}
                                    </el-checkbox>
                                </div>
                                <div class="text item" style='height:350px'>
                                    <div v-show="checkedAlert.indexOf(alert.id) > -1">
                                        <el-form label-position="top">
                                            <el-form-item label='报警类型'>
                                                <el-select v-model="alert.mode">
                                                    <el-option v-for="mode in mode_list" :key=mode.id :label='mode.mode' :value='mode.id'>
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            
                                            
                                            <div v-if='alert.mode==1'>
                                                <el-form-item label='温度上限'>
                                                    <el-input-number v-model="alert.low" controls-position="right" :precision='1' :step="0.1" :min='-270' :max='100'>
                                                    </el-input-number>
                                                </el-form-item>
                                            </div>
                                            <div v-if='alert.mode==2'>
                                                <el-form-item label='温度下限'>
                                                    <el-input-number v-model="alert.high" controls-position="right" :precision='1' :step="0.1" :min='-270' :max='100'>
                                                    </el-input-number>
                                                </el-form-item>
                                            </div>
                                            <div v-if='alert.mode==3'>
                                                <el-form-item label='温度区间'>
                                                    <el-input-number v-model="alert.low" controls-position="right" :precision='1' :step="0.1" :min='-270' :max='alert.high - 0.1'>
                                                    </el-input-number>
                                                    &nbsp;~&nbsp;
                                                    <el-input-number v-model="alert.high" controls-position="right" :precision='1' :step="0.1" :min='alert.low + 0.1' :max='100'>
                                                    </el-input-number>
                                                </el-form-item>
                                            </div>
                                            
                                            <el-form-item label='阈值'>
                                                <el-input-number v-model="alert.threshold" controls-position="right" :precision="1" :step="0.5" :min="0.5" :max="127.5"></el-input-number>
                                            </el-form-item>
                                            <br  />
                                            当前温度{{ alert | depend }} 超过 {{ alert.threshold }} 分钟时报警
                                        </el-form>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-col>
                </el-checkbox-group>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { type_post } from "../axios_api/api";
export default {
    data(){
        return{
            checkedAlert:[1],
            mode_list: [{id:1,mode:'单温上限-单个事件'}, {id:2,mode:'单温下限-单个事件'}, {id:3,mode:'单温度范围-累计事件'}],
            typeForm:{
                type:'',
                delay:0,
                desc:'',
                period:0,
                low_temp:10,
                high_temp:15,
            },
            alert_list:[
                {id:1,low:15,high:10,threshold:5,mode:1},
                {id:2,low:15,high:10,threshold:5,mode:1},
                {id:3,low:15,high:10,threshold:5,mode:1},
                {id:4,low:15,high:10,threshold:5,mode:1},
                {id:5,low:15,high:10,threshold:5,mode:1},
                {id:6,low:15,high:10,threshold:5,mode:1},
            ],
            rules:{
                type:[
                    { required: true, message:'请输入名称', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        submit(){
            var alert_data = []
            for(var i=0; i< this.alert_list.length; i++){
                if(this.checkedAlert.indexOf(this.alert_list[i].id) > -1){
                    alert_data.push(this.alert_list[i])
                }
            }
            type_post({type:this.typeForm, alert:alert_data}).then(resp=>{
                console.log(resp.message)
            })
            console.log(JSON.stringify(alert_data))
        }
    },
    filters:{
        depend(value){
            if(value.mode==1){
                return ' 高于' + value.low + "℃ "
            }
            if(value.mode==2){
                return ' 低于' + value.high + "℃ "
            }
            if(value.mode==3){
                return '在 ' + value.low + "℃ 与 " + value.high + "℃ 之间"
            }
        }
    }
}
</script>

<style>
.analysis_area{
    height:403px
}
.unit_card{
    padding:20px 20px 0 20px
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>